<template>
  <div>
    <el-form ref="myform" :model="formItem" label-width="120px" size="mini" class="form-view">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="巡检分类">
            {{ categoryName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="巡检项类别">
            {{ itemTypeName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="巡检项内容">
            {{ formItem.item }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据类型">
            {{ dataTypeName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="序号">
            {{ formItem.sort }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位">
            {{ formItem.unit }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="异常判断规则">
            <div style="height: 100px;">
              {{ formItem.rule }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结果候选值">
            {{ formItem.candidateValueArr }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规则状态">
            {{ formItem.disabled ? '启用' : '停用' }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

// 定义一个表单原始项
const formItem = {
  // 分类
  category: '',
  // 巡检项类别
  itemType: '',
  //  巡检内容
  item: '',
  // 巡检项数据类型
  dataType: '',
  // 单位
  unit: '',
  // 排序
  sort: 0,
  // 候选值
  candidateValue: '',
  candidateValueArr: [],
  // 异常判断准则
  rule: '',
  // 是否禁用
  disabled: false
}

import { detail } from '@neu/dcom-ui/api/hnInspectionItem'
import { findByDictionaryType } from '@neu/dcom-ui/api/dictionary'
export default {
  name: 'HnInspectionView',
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: true,
      type: Number
    }
  },
  data() {
    return {
      // 编辑的表单内容
      formItem: {
        ...formItem
      },
      dataTypes: [{ name: '单选', code: 'select' }, { name: '整数', code: 'number' }],
      categories: [{ name: '日巡检', code: 'day' }, { name: '定期健康巡检', code: 'regular' }, { name: '重保服务', code: 'service' }],
      // 巡检项类别
      types: []
    }
  },
  computed: {
    categoryName: function() {
      const cate = this.categories.find(it => it.code === this.formItem.category)
      return cate ? cate.name : ''
    },
    dataTypeName: function() {
      const type = this.dataTypes.find(it => it.code === this.formItem.dataType)
      return type ? type.name : ''
    },
    itemTypeName: function() {
      const type = this.types.find(it => it.code === this.formItem.itemType)
      return type ? type.text : ''
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: function() {
      this.fetch()
    }
  },
  created() {
    this.fetch()
    findByDictionaryType('hnInspectionItemType').then(res => {
      if (res.status === 'success') {
        this.types = res.data
      }
    })
  },
  methods: {
    // 初始化表单数据
    fetch() {
      detail(this.id).then(response => {
        const data = response.data
        this.formItem = {
          ...data
        }
      })
    },
    // 获取字典表名称
    getName(list, code) {
      const one = list.find(e => e.code === code)
      return one ? one.text : ''
    }
  }
}
</script>
